﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Selector.aspx.cs" Inherits="LearnJquery.Selector.Selector" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.4.1-vsdoc.js"></script>
    <style type="text/css">
        .myClass
        {
            color: Red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <p>
            one</p>
        <p id="two" class="myClass">
            two</p>
        <p id="two[max]">
            three</p>
        <p>
            four</p>
        <input type="button" value="Select Id" onclick="javascript:selectById()" />
        <script type="text/javascript">
            function selectById() {
                var p = $("#two").get();
                alert(p[0].innerHTML);

                p = $("#two\\[max\\]");
                alert(p.get(0).innerHTML);
            }
        </script>
        <input type="button" value="Select Element" onclick="selectElement()" />
        <script type="text/javascript">
            function selectElement() {
                var p = $("p");
                alert(p.length);
            }
        </script>
        <input type="button" value="Select Class" onclick="selectClass()" />
        <script type="text/javascript">
            function selectClass() {
                var p = $(".myClass");
                alert(p.get(0).innerHTML);
            }
        </script>
        <input type="button" value="Select *" onclick="getAll()" />
        <span>头信息</span><span id="all"></span>
        <script type="text/javascript">
            function getAll() {
                var p = $("*");
                p.each(function () {
                    var element = $("#all");
                    element.get(0).innerHTML += this.nodeName + "  |  ";
                });
            }
        </script>

        <input type="button" value="Mutil Selector" onclick="javascript:alert($('div,span,input,#two').length)" />
    </div>
    </form>
</body>
</html>
